<!--
 * @Author: xiongang 407700216@qq.com
 * @Date: 2022-07-10 18:01:05
 * @LastEditors: cool panda
 * @LastEditTime: 2023-04-25 21:53:45
 * @FilePath: \big-screen-vue-datav\src\components\floatBg.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="float-content">
    <!-- 5个有图的位置 -->
    <div class="box box1">
      <img class="img1" src="../assets/img/one.png" alt="" />
      <div class="desc">炼油厂</div>
    </div>
    <div class="box box2">
      <img class="img1" src="../assets/img/two.png" alt="" />
      <div class="desc">船舶</div>
    </div>
    <div class="box box3">
      <img class="img1" src="../assets/img/three.png" alt="" />
      <div class="desc">输油管道</div>
    </div>
    <div class="box box4">
      <img class="img1" src="../assets/img/four.png" alt="" />
      <div class="desc">机坪网管</div>
    </div>
    <div class="box box5">
      <img class="img1" src="../assets/img/five.png" alt="" />
      <div class="desc">飞机</div>
    </div>
    <!-- 连线 -->
    <div class="line line1"></div>
    <div class="line line2"></div>
    <div class="line line3"></div>
    <div class="line line4"></div>
    <div class="line line5"></div>
    <div class="line line6"></div>
    <div class="line line7"></div>
    <div class="line line8"></div>
    <div class="line line9"></div>
    <div class="line line10"></div>
    <div class="line line11"></div>
    <div class="line line12"></div>
    <!-- 三个计划 -->
    <div class="blue-line1"></div>
    <div class="blue-line2"></div>
    <div class="blue-line3"></div>
    <div
      class="boxx boxx1"
      :class="checkedId === 'a' ? 'active' : ''"
      @click="checkedId = 'a'"
    >
      <div class="desc">接卸计划</div>
      <div class="throbber throbber_large"></div>
    </div>
    <div
      class="boxx boxx2"
      :class="checkedId === 'b' ? 'active' : ''"
      @click="checkedId = 'b'"
    >
      <div class="desc">传输计划</div>
      <div class="throbber throbber_large"></div>
    </div>
    <div
      class="boxx boxx3"
      :class="checkedId === 'c' ? 'active' : ''"
      @click="checkedId = 'c'"
    >
      <div class="desc">发油计划</div>
      <div class="throbber throbber_large"></div>
    </div>
    <!-- 四个定点油库 -->
    <div class="oil-box box1">
      <div class="desc">高桥中转油库</div>
      <img class="img" src="../assets/img/box-bg2.png" alt="" />
      <svg-icon icon-class="s_bottom" class="svg"></svg-icon>
    </div>
    <div class="oil-box box2">
      <div class="desc">浦航中转油库</div>
      <svg-icon icon-class="s_bottom" class="svg"></svg-icon>
      <img class="img" src="../assets/img/box-bg2.png" alt="" />
    </div>
    <div class="oil-box box3">
      <div class="desc">浦东机场使用油库</div>
      <svg-icon icon-class="s_bottom" class="svg"></svg-icon>
      <img class="img" src="../assets/img/box-bg2.png" alt="" />
    </div>
    <div class="oil-box box4">
      <div class="desc">加油车</div>
      <svg-icon icon-class="s_bottom" class="svg"></svg-icon>
      <img class="img" src="../assets/img/box-bg2.png" alt="" />
      <div class="cart-box">
        <svg-icon icon-class="cart" class="cart"></svg-icon>
        <div class="data-box">
          <div class="text">
            当日加油量：<span>{{ dataList[0] && dataList[0].OLKG }} kg</span>
          </div>
          <div class="text">
            当日加油架次：<span>{{
              dataList[0] && dataList[0].TaskCount
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div v-if="checkedId" class="mask" @click="checkedId = ''">
      <div class="table" :class="checkedId">
        <div class="title">中转油库收油作业计划</div>
        <div class="table-line">
          <div class="ttab-title">
            航博日期
          </div>
          <div class="ttab-title">
            中转油库
          </div>
          <div class="ttab-title">
            船名
          </div>
          <div class="ttab-title">
            合同号
          </div>
          <div class="ttab-title">
            油品性质
          </div>
          <div class="ttab-title">
            装货港
          </div>
          <div class="ttab-title">
            数量（万吨）
          </div>
          <div class="ttab-title">
            收油罐编号
          </div>
          <div class="ttab-title">
            备注
          </div>
        </div>
        <div class="data-line" v-for="(tab, i) in tableList" :key="i">
          <div class="data-item">
            {{ tab.a }}
          </div>
          <div class="data-item">
            {{ tab.b }}
          </div>
          <div class="data-item">
            {{ tab.c }}
          </div>
          <div class="data-item">
            合同号
          </div>
          <div class="data-item">
            油品性质
          </div>
          <div class="data-item">
            装货港
          </div>
          <div class="data-item">
            数量（万吨）
          </div>
          <div class="data-item">
            收油罐编号
          </div>
          <div class="data-item">
            备注
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableList: [],
      checkedId: "",
      dataList: [],
    }
  },
  mounted() {
    this.getOilTaskTodayStatus()
    for (let index = 0; index < 10; index++) {
      const b = {
        a: "公元2022年",
        b: "高桥",
        c: "管输",
        d: "22-1237SG",
        e: "以出顶进",
        f: "高桥",
        g: "1",
        h: "1702     1705",
        j: "",
      }
      this.tableList.push(b)
    }
  },
  methods: {
    async getOilTaskTodayStatus() {
      const res = await this.$store.dispatch("GetOilTaskTodayStatus")
      this.dataList = res
      //   if (res) {
      //     console.log(res)
      //   }
    },
  },
}
</script>
<style lang="scss" scoped>
.float-content {
  position: relative;
  .line {
    position: absolute;
    border-bottom: 2px dashed rgba(16, 209, 231, 0.6);
  }
  .line1 {
    top: 37px;
    height: 0px;
    width: 116px;
    transform: rotate(24deg) translate(40px, -10px);
  }
  .line2 {
    top: 0;
    height: 0px;
    width: 830px;

    transform: rotate(-6deg) translate(184px, 43px);
  }
  .line3 {
    top: 0;
    right: 20px;
    height: 0px;
    width: 30px;

    transform: rotate(48deg) translate(-15px, 20px);
  }
  .line4 {
    top: 138px;
    right: -35px;
    height: 0px;
    width: 270px;

    transform: rotate(112deg);
  }
  .line5 {
    top: 84px;
    left: 185px;
    height: 0px;
    width: 716px;

    transform: rotate(2deg);
  }
  .line6 {
    top: 180px;
    height: 0px;
    right: 112px;
    width: 190px;

    transform: rotate(64deg);
  }
  .line7 {
    top: 344px;
    right: 152px;
    height: 0px;
    width: 192px;

    transform: rotate(144deg);
  }
  .line8 {
    top: 480px;
    height: 0px;
    width: 88px;
    right: 306px;

    transform: rotate(92deg);
  }
  .line9 {
    top: 600px;
    height: 0px;
    right: 318px;
    width: 198px;

    transform: rotate(130deg);
  }
  .line10 {
    top: 749px;
    height: 0px;
    width: 170px;
    right: 494px;
    -webkit-transform: rotate(147deg);
    transform: rotate(147deg);
  }
  .line11 {
    top: 758px;
    height: 0px;
    left: 107px;
    width: 325px;
    transform: rotate(14deg);
  }
  .line12 {
    top: 37px;
    height: 0px;
    width: 116px;
    transform: rotate(24deg) translate(40px, -10px);
  }
  .box {
    &.box1 {
      margin-top: 60px;
    }
    &.box2 {
      margin: 9px 0 0 150px;
    }
    &.box3 {
      position: absolute;
      right: 60px;
      top: 260px;
    }
    &.box4 {
      position: absolute;
      right: 400px;
      top: 670px;
    }
    &.box5 {
      position: absolute;
      left: 60px;
      top: 700px;
    }
    margin-left: 10px;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    .img1 {
      width: 40px;
      height: 40px;
    }
    .desc {
      background: url(../assets/img/box-bg.png) no-repeat;
      background-size: 100% 100%;
      font-size: 12px;
      font-weight: 600;
      color: #66ffff;
      line-height: 14px;
      padding: 10px 8px;
      margin-left: 10px;
      position: relative;
      z-index: 2;
    }
  }
  .boxx {
    position: relative;
    cursor: default;
    transition: transform 0.2s;
    &.active {
      z-index: 1001;
    }
    &.boxx1 {
      &:hover {
        transform: translate(200px, -110px) scale(1.2);
      }
      transform: translate(200px, -110px) scale(1);
    }
    &.boxx2 {
      &:hover {
        transform: translate(1000px, -130px) scale(1.2);
      }
      transform: translate(1000px, -130px) scale(1);
    }
    &.boxx3 {
      &:hover {
        transform: translate(700px, 300px) scale(1.2);
      }
      transform: translate(700px, 300px) scale(1);
    }
    background: url(../assets/img/box-bg1.png) no-repeat;
    background-size: 100% 100%;
    height: 40px;
    width: 70px;
    .desc {
      font-weight: 600;
      color: #66ffff;
      font-size: 12px;
      text-align: center;
      padding-top: 3px;
    }
    .throbber {
      width: 100%;
      height: 100%;
      transform: rotateX(60deg);
      display: -webkit-box;
      display: -webkit-flex;
      display: -moz-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
      -webkit-align-items: center;
      -moz-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -moz-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
    }
    .throbber:after {
      display: block;
      position: relative;
      width: 20px;
      height: 20px;
      transform: rotateX(60deg);
      -webkit-transform: otateX(60deg);
      -webkit-animation: rotate 3s linear infinite;
      animation: rotate 3s linear infinite;
      -webkit-border-radius: 100%;
      -moz-border-radius: 100%;
      border-radius: 100%;
      border-top: 2px solid #66ffff;
      border-bottom: 2px solid #31a9fc;
      border-left: 2px solid #66ffff;
      border-right: 2px solid #31a9fc;
      content: "";
      opacity: 0.5;
    }
    .throbber.throbber_large:after {
      width: 40px;
      height: 40px;
    }

    @keyframes rotate {
      0% {
        transform: rotateZ(-360deg);
        -webkit-transform: rotateZ(-360deg);
      }
      100% {
        transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
      }
    }
    @-webkit-keyframes rotate {
      0% {
        transform: rotateZ(-360deg);
        -webkit-transform: rotateZ(-360deg);
      }
      100% {
        transform: rotateZ(0deg);
        -webkit-transform: rotateZ(0deg);
      }
    }
  }
  .blue-line1 {
    height: 0px;
    width: 762px;
    border-bottom: 2px dashed rgba(63, 82, 243, 0.5);
    -webkit-transform: rotate(10deg) translate(200px, -10px);
    transform: rotate(1deg) translate(253px, -58px);
  }
  .blue-line2 {
    height: 0px;
    width: 670px;
    border-bottom: 2px dashed rgba(63, 82, 243, 0.5);
    -webkit-transform: rotate(10deg) translate(200px, -10px);
    transform: rotate(44deg) translate(231px, 24px);
  }
  .blue-line3 {
    height: 0px;
    width: 504px;
    border-bottom: 2px dashed rgba(63, 82, 243, 0.5);
    -webkit-transform: rotate(10deg) translate(200px, -10px);
    transform: rotate(-57deg) translate(203px, 633px);
  }
  .oil-box {
    position: absolute;
    .img {
      position: absolute;
      width: 50%;
      left: 28%;
      top: 48px;
    }
    &.box1 {
      right: 184px;
      top: 32px;
    }
    &.box2 {
      right: 30px;
      top: -95px;
    }
    &.box3 {
      right: 283px;
      top: 350px;
    }
    &.box4 {
      left: 384px;
      top: 732px;
      .cart-box {
        left: -20%;
        width: 140%;
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 40px;
        height: 43px;
        background: rgba(6, 19, 80, 0.29);
        box-shadow: inset 0px 0px 1px 0px rgba(0, 224, 219, 1);
        border: 0px solid rgba(102, 255, 255, 0.63);
        .cart {
          width: 60px;
          height: 20px;
        }
        .text {
          transform: scale(0.8);
          font-size: 12px;
          span {
            color: #66ffff;
          }
        }
      }
    }
    .desc {
      width: 140px;
      background: url(../assets/img/box-bg.png) no-repeat;
      background-size: 100% 100%;
      font-size: 12px;
      font-weight: 600;
      color: #66ffff;
      line-height: 14px;
      padding: 10px 0;
      text-align: center;
      margin-left: 10px;
    }
    .svg {
      margin-top: 6px;
      z-index: 2;
      position: relative;
      width: 20px;
      margin-left: calc(50% - 6px);
      -webkit-animation: rotateY 3s linear infinite;
      animation: rotateY 3s linear infinite;
    }
    @keyframes rotateY {
      0% {
        transform: rotateY(-360deg);
        -webkit-transform: rotateY(-360deg);
      }
      100% {
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
      }
    }
    @-webkit-keyframes rotateY {
      0% {
        transform: rotateY(-360deg);
        -webkit-transform: rotateY(-360deg);
      }
      100% {
        transform: rotateY(0deg);
        -webkit-transform: rotateY(0deg);
      }
    }
  }
  .mask {
    z-index: 1000;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }
  .table {
    &.a {
      transform: translate(200px, 230px);
    }
    &.b {
      transform: translate(580px, 250px);
    }
    &.c {
      transform: translate(800px, 450px);
    }
    width: 918px;
    background: linear-gradient(
      180deg,
      rgba(10, 42, 85, 0.8) 0%,
      rgba(6, 36, 75, 0.8) 100%
    );
    border-radius: 3px;
    border: 1px solid #1fb0f9;
    .title {
      text-align: center;
      font-size: 13px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #66ffff;
      line-height: 18px;
      padding: 11px 0;
    }
    .table-line {
      display: flex;
      flex-shrink: 0;
      border-top: 1px solid #1fb0f9;
      border-bottom: 1px solid #1fb0f9;
      .ttab-title {
        &:last-child {
          border: none;
        }
        flex: 1;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        color: #66a5fd;
        line-height: 14px;
        padding: 11px 0;
        background: #1b346d;
        border-right: 1px solid #1fb0f9;
      }
    }
    .data-line {
      &:last-child {
        border: none;
      }
      display: flex;
      flex-shrink: 0;
      border-bottom: 1px solid #1fb0f9;
      .data-item {
        &:last-child {
          border: none;
        }
        flex: 1;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        color: #66ffff;
        line-height: 14px;
        padding: 11px 0;
        background: #1b346d;
        border-right: 1px solid #1fb0f9;
      }
    }
  }
}
</style>
